<template>
    <div>
        <nav class="navbar navbar-dark bg-primary justify-content-between mb-4 px-4">
            <a class="navbar-brand" href="#">知乎专栏</a>
            <ul v-if="!user.isLogin" class="list-inline mb-0">
                <li class="list-inline-item"><router-link to="/login"
                        class="btn btn-outline-light my-2">登陆</router-link></li>
                <li class="list-inline-item"><router-link to="/register"
                    class="btn btn-outline-light my-2">注册</router-link></li>
            </ul>
            <ul v-else class="list-inline mb-0">
                <li class="list-inline-item">
                    <Dropdown :title="`你好 ${user.nickName}`">
                        <DropdownItem><router-link class="dropdown-item" to="/create">新建文章</router-link></DropdownItem>
                        <DropdownItem><router-link class="dropdown-item" :to="`/column/${user.column}`">我的专栏</router-link></DropdownItem>
                        <DropdownItem><router-link class="dropdown-item" to="/">编辑资料</router-link></DropdownItem>
                        <DropdownItem><router-link class="dropdown-item" to="/" @click.prevent="logout">退出登录</router-link></DropdownItem>
                    </Dropdown>
                </li>
            </ul>
        </nav>
    </div>
</template>
<script lang="ts" setup>
import {defineProps,nextTick,PropType, useShadowRoot} from 'vue'
import Dropdown from './Dropdown.vue';
import DropdownItem from './DropdownItem.vue';
import { UserProps } from '@/utlis/type';
import { useRouter } from 'vue-router';
import store from '@/store/store';
const router = useRouter()
defineProps({
    user:{
        type: Object as PropType<UserProps>,
        required: true,
    }
})
const logout =  () =>{
    //问题：当移除token和修改user.isLogin后，仍然没有跳转到登录页面，
    // token的值没有进行及时的更新，当localStorage中移除token后，store中的token的字段还存在
    store.commit('logout')
    router.push('/login') 
}
</script>
<style>

</style>